<script>
import MenuItem from './components/MenuItem.vue'
import { routes } from '@/router/index.js'

export default {
  name: 'Header',
  setup() {
    return {
      routes
    }
  },
  computed: {
    activeIndex() {
      return this.$route.path
    }
  },
  components: { MenuItem }
}
</script>

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="0">
      <img
        style="width: 45px"
        src="@/assets/logo.svg"
        alt="logo"
      />
    </el-menu-item>

    <MenuItem v-for="(route, index) in routes" :route="route" :key="index" />
  </el-menu>
</template>

<style lang="scss" scoped>

</style>
